<template>
  <div class="wrapper">
    <!--  导航栏  -->
    <Header active="home" @getUser="getUser"/>
    <!--内容-->
    <div style="margin-top:20px;">
      <el-row type="flex" justify="left" align="middle">
        <el-col :offset="4" :span="16">
          <h2 style="float:left;">
            {{ discussPost.title }}
            <el-tag effect="dark" type="success" size="mini" v-if="discussPost.type==1">置顶</el-tag>
            <el-tag effect="dark" type="danger" size="mini" v-if="discussPost.status==1">精华</el-tag>
          </h2>
          <el-button-group style="float:right;" v-if="user!=null&&user.type==1">
            <el-button v-if="discussPost.type==0" class="margin-left-small" size="small" type="primary"
                       @click="updateField('type',1)">置顶
            </el-button>
            <el-button v-if="discussPost.status==0" class="margin-left-small" size="small" type="success"
                       @click="updateField('status',1)">加精
            </el-button>
            <el-button v-if="discussPost.status!=2" class="margin-left-small" size="small" type="danger"
                       @click="updateField('status',2)">删除
            </el-button>
          </el-button-group>
        </el-col>
      </el-row>
      <el-row type="flex" justify="left" align="middle">
        <el-col :offset="4" :span="1">
          <!-- 进入用户主页 -->
          <a :href="'/profile?userId='+poster.id">
            <el-avatar :src="poster.headerUrl" alt="用户头像"
                       style="width:60px;height:60px;" fit="fill"></el-avatar>
          </a>
        </el-col>
        <el-col :span="15" style="text-align: left;">
          <div style="font-size: 10px;margin-top:10px;">
            <h1 style="color: orange">{{ poster.username }}</h1>
            <h2 style="float: left;">发布于 {{ discussPost.createTime }}</h2>
            <h2 style="float: right;color: cadetblue">赞 {{ discussPost.good }} | 回帖 {{ discussPost.commentCount }}</h2>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row style="margin-top:-30px;margin-bottom: 10px;">
        <el-col :offset="4" :span="16">
          <p style="text-align: justify;line-height: 150%;">{{ discussPost.content }}</p>
        </el-col>
      </el-row>

      <!--评论-->
      <el-row>
        <el-col :offset="4" :span="16" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 10px">
          <el-row type="flex" justify="left" align="middle" v-for="(data,index) in commentList" :key="index">
            <el-col>
              <el-row v-if="data!=null">
                <el-col :span="2" style="padding-top: 0px;">
                  <!-- 进入用户主页 -->
                  <a :href="'/profile?userId='+data.poster.id">
                    <el-avatar alt="用户头像" :src="data.poster.headerUrl" fit="fill"></el-avatar>
                  </a>
                </el-col>
                <el-col :span="22">
                  <el-row>
                    <el-col :span="8">
                      <span style="color: teal;float: left;">{{ data.poster.username }}
                        <span style="font-size: 10px;color: darkgray">{{ data.comment.createTime }}</span>
                      </span>
                    </el-col>
                    <el-col :offset="15" :span="1">
                      <el-tag size="mini" style="float:right;cursor:pointer;"
                              @click="reply((pageNum-1) * pageSize + index + 1)" title="回复">
                        {{ (pageNum - 1) * pageSize + index + 1 }}#
                      </el-tag>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24" style="line-height: 5px;">
                      <p style="float: left;font-size: 18px;">{{ data.comment.content }}</p>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row style="line-height: 1px;">
                <el-col>
                  <hr style="opacity: 0.3;">
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-pagination
          style="margin-top:10px;"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

      <!--   评论区   -->
      <div id="comment" v-if="user!=null">
        <el-row>
          <el-col :offset="4" :span="16">
            <el-input type="textarea" :rows="5" v-model="content"></el-input>
            <el-button style="float:right;" @click="submitComment" type="primary">发布</el-button>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--  右下角按钮区域  -->
    <el-button-group style="position: fixed;right:7%;bottom:190px;z-index: 999;">
      <a v-if="good">
        <el-button type="success" icon="el-icon-thumb" circle title="您已点赞" @click="goodPost"></el-button>
      </a>
      <a v-else>
        <el-button icon="el-icon-thumb" title="觉得不错,点个赞!" circle @click="goodPost"></el-button>
      </a>
      <br>
      <a>
        <el-button type="primary" icon="el-icon-chat-dot-round" circle title="我要留言" @click="toTop"></el-button>
      </a>
    </el-button-group>
    <!--  底栏  -->
    <Footer/>
  </div>
</template>

<script>
import Header from "@/views/Header";
import Footer from "@/views/Footer";

export default {
  name: "DiscussPostDetail",
  components: {Footer, Header},
  data() {
    return {
      postId: '',
      discussPost: {},
      commentList: [],
      poster: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      orderBy: '',
      newPostDialogShow: false,
      postFormData: {},
      post_detail_url: '/community/discussPost',
      good_post_url: '/community/discussPost/good',
      post_comment_url: '/community/comment',
      good: false,
      content: null,
      user: null,
    }
  },
  mounted() {
    this.postId = this.$route.query.postId;
    this.good = this.$cookies.get('good' + this.postId);
    this.getPostDetail();
    this.getCommentList();
  },
  methods: {
    toTop() {
      document.querySelector('#comment').scrollIntoView({behavior: 'smooth'});
    },
    updateField(field, value) {
      this.axios.put(this.post_detail_url + '/' + this.postId + '/' + field + '/' + value).then((response) => {
        if (response.data) {
          if (response.data.code === '00000') {
            console.log('updateField:', response);
            this.$message.success('操作成功!');
            this.getPostDetail();
          }
        } else {
          this.$message.error('操作失败,无权操作!');
        }
      }).catch((error) => {
        this.$message.success('操作失败!');
        this.$message.error(error);
      });
    },
    getUser(info) {
      console.log('getUser:', info);
      this.user = info;
    },
    reply(index) {
      this.content = 'to ' + index + '#: ';
    },
    submitComment() {
      if (!this.content) {
        this.$message.warning('请留下您的观点!');
        return;
      }
      let data = {content: this.content};
      this.content = null;
      this.axios.post(this.post_comment_url + '/' + this.postId,
          data
      ).then((response) => {
        if (response.data.code === '00000') {
          this.$message.success('评论成功!');
          this.getCommentList();
          this.discussPost.commentCount++;
        } else {
          this.$message.error(response.data.message);
        }
      }).catch();
    },
    getCommentList() {
      this.axios.get(this.post_comment_url + '/' + this.postId + '/' + this.pageNum + '/' + this.pageSize).then((response) => {
        console.log('getCommentList:', response);
        this.commentList = response.data.data;
        this.total = response.data.total;
      }).catch((error) => {
        this.$message.error(error);
      });
    },
    goodPost() {
      if (this.good) {
        this.$message.info('您已点赞!');
        return;
      }
      this.axios.put(this.good_post_url + '/' + this.postId
      ).then((response) => {
        if (response.data.code === '00000') {
          this.discussPost.good = this.discussPost.good + 1;
          this.$message.success("点赞成功,感谢您的支持!");
          this.$cookies.set('good' + this.postId, true);
          this.good = true;
        } else {
          this.$message.error(response.data.message);
        }
      }).catch();
    },
    getPostDetail() {
      this.axios.get(this.post_detail_url + '/' + this.postId).then((response) => {
        console.log('getPostDetail:', response);
        if (response.data.code === '00000') {
          this.discussPost = response.data.data.discussPost;
          this.poster = response.data.data.user;
        } else {
          this.$message.error({
            message: response.data.message,
            duration: 2000,
            onClose: this.$router.go(-1)
          });
        }
      }).catch((error) => {
        console.log(error);
        this.$message.error({
          message: '获取帖子失败!',
          duration: 2000,
          onClose: this.$router.go(-1)
        });
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCommentList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getCommentList();
    },
    showPostDialog() {
      this.newPostDialogShow = true;
    }
  }
}
</script>

<style scoped>
.list-unstyled {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

>>> *.el-tag {
  margin-left: 5px;
}

.margin-left-small {
  margin-left: 5px !important;
}
</style>
